<!-- 音标专练练习 -->

<template>
	<AppHeader :title="title" :banAnimate="true" backgroundColor="#ffffff" titleColor="#000000"
		@leftClickEvent="onClickLeft()">
	</AppHeader>
	<div class="container-practice" v-if="practoceList && practoceList.length">
		<div class="container-height"></div>
		<div class="practice-top">
			<div class="practice-top-currentPage">{{ currentPage }}<span>/{{ practoceList.length }}</span></div>
			<div class="practice-top-slider">
				<Slider v-model="currentPage" :disabled="true" min="1" :max="practoceList.length || 1000"
					active-color="#0CB76C">
				</Slider>
			</div>
			<div class="practice-top-switch" @click="switchManual">
				<div :class="active == 1 ? 'active' : ''">自动</div>
				<div :class="active == 2 ? 'active' : ''">手动</div>
			</div>
		</div>
		<div class="practice-img" v-if="practoceList.length">
			<img :src="practoceList[currentPage - 1].wordPic" />
		</div>
		<div class="practice-context" v-if="practoceList.length">
			<div class="practice-context-title">{{ practoceList[currentPage - 1].words }}</div>
			<div class="practice-context-context" v-if="practoceList[currentPage - 1].symbol">
				[{{ practoceList[currentPage - 1].symbol }}]</div>
			<div class="practice-context-context">{{ practoceList[currentPage - 1].pretations }}</div>
			<div class="practice-context-bottom">
				<div>例句</div>
				<div>{{ practoceList[currentPage - 1].sentences }}</div>
				<!-- <div>He looks nervous.</div> -->
			</div>
		</div>

		<div class="practiceFractionBox">
			<div class="practiceFraction" v-if="practoceList[currentPage - 1].sourceObj && recordingStatus=='ended'">
				<div :class="autoColor(practoceList[currentPage - 1].sourceObj.total_score)">
					{{
						Math.round(practoceList[currentPage - 1].sourceObj.total_score) }}分
				</div>
				<img src="@/assets/phoneticPractice/scoreSrcRed.png"
					v-if="practoceList[currentPage - 1].sourceObj.total_score<60&&recordingStatus=='ended'" />
				<img src="@/assets/phoneticPractice/scoreSrcYellow.png"
					v-if="(practoceList[currentPage - 1].sourceObj.total_score>60&&practoceList[currentPage - 1].sourceObj.total_score<80)&&recordingStatus=='ended'" />
				<img src="@/assets/phoneticPractice/scoreSrcGreed.png"
					v-if="practoceList[currentPage - 1].sourceObj.total_score>80&&recordingStatus=='ended'" />
				<div class="context">
					<div class="label">完成度</div>
					<div :class="autoColor(practoceList[currentPage - 1].sourceObj.accuracy_score)">{{
						Math.round(practoceList[currentPage - 1].sourceObj.accuracy_score) }}</div>
				</div>
				<div class="context">
					<div class="label">流利度</div>
					<div :class="autoColor(practoceList[currentPage - 1].sourceObj.fluency_score)">{{
						Math.round(practoceList[currentPage - 1].sourceObj.fluency_score) }}</div>
				</div>
				<div class="context">
					<div class="label">准确度</div>
					<div :class="autoColor(practoceList[currentPage - 1].sourceObj.integrity_score)">{{
						Math.round(practoceList[currentPage - 1].sourceObj.integrity_score) }}</div>
				</div>
			</div>

		</div>
		<div class="practice-button">
			<!-- v-if="active == 2" -->
			<div class="wordsVoice" v-if="active == 2">
				<img @click="onlyPlayAudio" :src="playImgSrc" />
			</div>
			<!-- 弹性盒占位 -->
			<div class="wordsVoice" v-else>
			</div>
			<div class="wordsPlay" v-if="active == 2">
				<!-- @click="tapeClick" -->
				<div class="circle-container" v-if="recordingStatus == 'recording'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
				<img src="@/assets/phoneticPractice/录音@3x.png" v-if="recordingStatus != 'recording'"
					@click="tapeClick" />
			</div>
			<div class="wordsPlay" v-if="active == 1">
				<div class="circle-container" v-if="recordingStatus == 'recording'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
				<div class="circle-container" v-if="recordingStatus == 'playing'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle1" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
			</div>
			<div class="myVoice">
				<!-- recordingStatus=='ended'|| -->
				<div class="circle-container1"
					v-if="practoceList[currentPage - 1].video && active == 2 && isPlayMyVideo">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">

						<circle :class="isPlayMyVideo ? 'circle1' : ''" cx="18" cy="18" r="16" fill="none"
							stroke="#0CB76C" stroke-width="1" stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img src="@/assets/phoneticPractice/播放@3x.png" style="position: absolute;" />
				</div>
				<img src="@/assets/phoneticPractice/播放@3x.png"
					v-if="practoceList[currentPage - 1].video && active == 2 && !isPlayMyVideo"
					@click="playRecording" />
				<div @click="completeClick" class="practice-button-complete"
					v-if="active == 2 && recordingStatus == 'recording'">完成录音</div>
			</div>
		</div>
		<!-- 填充盒子 -->
		<div class="fillBox"></div>
		<div class="practice-bottom" v-show="active == 2">
			<div @click="previousWords">上一个</div>
			<div @click="nextWords"
				v-show="practoceList[currentPage - 1].video || (active == 2 && recordingStatus == 'ended')">
				下一个</div>
		</div>
		<div class="practice-bottom" v-show="active == 1">
			<img class="practice-bottom-img" :src="bottomImgSrc" @click="automaticPlay" />
		</div>
	</div>
	<Overlay :show="automaticOverlay">
		<div class="automaticOverlay">
			<div class="automaticOverlay-context" v-if="active == 1">手动模式可重读跟读，需要您自主操作进行跟读流程,确定切换吗?</div>
			<div class="automaticOverlay-context" v-if="active == 2">关闭手动模式将自动进行跟读流程，确认关闭吗?</div>
			<div class="automaticOverlay-button">
				<div @click="cancelSwitch">取消</div>
				<div @click="switchAutomatic">确定</div>
			</div>
		</div>
	</Overlay>
	<van-overlay :show="recordingStatus == 'evaluating'">
		<div class="loading">
			<van-loading type="spinner" />
			<div class="text">评分中...</div>
		</div>
	</van-overlay>
	<audio ref="audioElement" :src="audioSrc" @ended="playEnded"></audio>
	<audio ref="dingAudioElement" :src="dingAudioSrc" @ended="dingPlayEnded"></audio>
</template>

<script setup>
	import {
		Slider,
		Overlay
	} from "vant";
	import AppHeader from '../../components/AppHeader.vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ref,
		watch,
		toRefs,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		showToast,
	} from "vant";
	import {
		getUserPlaySetting,
		setUserPlaySetting
	} from '@/api/user'
	import {
		getPhoneticPracticeWords,
		savePhoneticPracticeScore
	} from '@/api/phoneticPractice'

	const router = useRouter()
	const route = useRoute()
	const onClickLeft = () => {
		router.go(-1)
	}
	const currentPage = ref(1)
	const active = ref(1)
	const automaticOverlay = ref(false)
	const title = route.query.title;
	const state = reactive({
		practoceList: [],
		sourceObj: {}
	})
	const playImgSrc = ref()
	const tapeImgSrc = ref()
	const bottomImgSrc = ref()
	const scoreSrc = ref()
	const audioElement = ref(null)
	const audioPlayer = ref(null)
	const audioSrc = ref('')
	const recordingStatus = ref(
		'notStarted') //录音状态  playing语音播放中 playEnded语音播放结束 notStarted未开始  recording 录音中  evaluating评测中  ended 已结束
	let totalTime = 0

	watch(recordingStatus, (newVal) => {
		console.log('录音状态', newVal)
	})

	const initImg = async () => {
		if (active.value == 1) {
			const tapeModule = await import('@/assets/phoneticPractice/读@3x.png')
			tapeImgSrc.value = tapeModule.default
			const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
			bottomImgSrc.value = bottomModule.default
		} else {
			const playModule = await import('@/assets/phoneticPractice/声音@3x.png')
			playImgSrc.value = playModule.default
			const tapeModule = await import('@/assets/phoneticPractice/录音@3x.png')
			tapeImgSrc.value = tapeModule.default
		}
	}

	//获取用户设置
	const getUserSetting = async () => {
		getUserPlaySetting().then(res => {
			active.value = res.data.symbol_set
			automaticPlay()
		})
	}
	//设置用户设置
	const setUserSetting = () => {
		if (active.value == 2) {
			active.value = 1
		} else {
			active.value = 2
		}
		setUserPlaySetting({
			symbol_set: active.value
		}).then(res => {
			getUserSetting()
		})
	}
	const cancelSwitch = async () => {
		automaticOverlay.value = false
		clearTimeout(setTimeoutVal.value)
		automaticPlay()
	}
	const switchAutomatic = async () => {
		const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
		bottomImgSrc.value = bottomModule.default
		setUserSetting()
		automaticOverlay.value = false
	}
	//修改用户配置状态
	const switchManual = () => {
		automaticOverlay.value = true
		clearTimeout(setTimeoutVal.value)
		if (recordingStatus.value == 'recording') {
			stopRecording() //结束录音
		}
		isPlay.value = 'stop'
		recordingStatus.value = 'notStarted'
	}

	//获取音标专练单词列表
	const getMissionAnswerDetail = () => {
		getPhoneticPracticeWords({
			versionId: route.query.versionId
		}).then(res => {
			state.practoceList = res.data
			playAudio()
		})
	}

	const autoColor = (num) => {
		if (num < 60) {
			return 'autoRed' //#FA192C
		} else if (num > 60 && num < 80) {
			return 'autoYellow' //#FF9917
		} else if (num > 80) {
			return 'autoGreed' //#0CB76C
		}
	}

	//保存跟读信息
	const saveFollow = async () => {
		let obj = state.practoceList[currentPage.value - 1]
		savePhoneticPracticeScore({
			versionId: route.query.versionId,
			wId: obj.wId,
			score: Math.round(obj.sourceObj.total_score),
			integrity: Math.round(obj.sourceObj.integrity_score),
			fluency: Math.round(obj.sourceObj.fluency_score),
			accuracy: Math.round(obj.sourceObj.accuracy_score),
			video: obj.video
		}).then(res => {
			if (active.value == 1 && isPlay.value == 'play') { //自动
				nextWords()
			}
		})
	}

	const isOnlyPlayAudio = ref(false)
	// 只播放音频不触发录音
	const onlyPlayAudio = async () => {
		clearTimeout(audioElementTimeoutVal.value)
		if (recordingStatus.value != 'ended') {
			return
		}
		isOnlyPlayAudio.value = true
		const playModule = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = playModule.default
		// recordingStatus.value = 'playing'
		const tapeModule = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = tapeModule.default

		audioSrc.value = state.practoceList[currentPage.value - 1].wordFile
		audioElementTimeoutVal.value = setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}

	// 播放音频
	const audioElementTimeoutVal = ref()
	const playAudio = async () => {
		clearTimeout(audioElementTimeoutVal.value)
		isUserCallBack.value = true //录音回调是否有用
		isOnlyPlayAudio.value = false
		const playModule = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = playModule.default
		const tapeModule = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = tapeModule.default

		audioSrc.value = state.practoceList[currentPage.value - 1].wordFile
		recordingStatus.value = 'playing'

		audioElementTimeoutVal.value = setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}

	//播放结束
	const playEnded = async () => {
		const playModule = await import('@/assets/phoneticPractice/声音@3x.png')
		playImgSrc.value = playModule.default
		if (isOnlyPlayAudio.value) {
			return false
		}

		isPlayMyVideo.value = false //结束自己的音频播放
		if (active.value == 1 && isPlay.value == 'play') {
			tapeClick()
		} else if (active.value == 1 && isPlay.value == 'stop') {
			recordingStatus.value = 'notStarted'
		}
		if (active.value == 2 && !state.practoceList[currentPage.value - 1].video) {
			tapeClick()
		}
	}
	//上一个
	const previousWords = () => {
		if (currentPage.value == 1) {
			return showToast('已经是第一个了')
		}
		if (currentPage.value) {
			currentPage.value--
			playAudio()
		}
	}
	// 下一个
	const nextWords = async () => {
		recordingStatus.value = 'notStarted'
		//提交任务
		if (currentPage.value == state.practoceList.length) {
			let use_time = Math.floor((Date.now() - totalTime) / 1000);
			router.push({
				path: '/phoneticPractice/submitTask',
				query: {
					title: title,
					versionId: route.query.versionId,
					use_time: use_time
				}
			})
		} else {
			currentPage.value++
			playAudio()
		}
	}
	const setTimeoutVal = ref()
	const dingAudioSrc = ref(null)
	const dingAudioElement = ref(null)
	const dingPlayEnded = async () => {
		clearTimeout(setTimeoutVal.value)
		//分数清除
		if (state.practoceList[currentPage.value - 1].sourceObj) {
			state.practoceList[currentPage.value - 1].sourceObj = null
		}
		//音频清除
		if (state.practoceList[currentPage.value - 1].video) {
			state.practoceList[currentPage.value - 1].video = null
			state.practoceList[currentPage.value - 1].fullVideo = null
		}
		const tapeModule = await import('@/assets/phoneticPractice/语音动画效果01.gif')
		tapeImgSrc.value = tapeModule.default
		if (isAndroid.value) {
			window.android.startRecord(state.practoceList[currentPage.value - 1].words, state.practoceList[
				currentPage.value - 1].wId);
			recordingStatus.value = 'recording'
		} else if (isiOS.value) {
			let message = {
				words: state.practoceList[currentPage.value - 1].words,
				Id: state.practoceList[currentPage.value - 1].wId
			}
			window.webkit.messageHandlers.startRecord.postMessage(message)
			recordingStatus.value = 'recording'
		}

		setTimeoutVal.value = setTimeout(async () => {
			completeClick()
		}, 5000);
	}

	//语音识别
	const tapeClick = () => {
		dingAudioSrc.value = "https://oss.bigchun.com/file/ding.mp3"
		dingAudioElement.value.play().catch((err) => {
			dingAudioElement.value.play()
		})
	}

	//完成识别
	const completeClick = async () => {
		clearTimeout(setTimeoutVal.value)
		if (isAndroid.value) {
			window.android.stopRecord(state.practoceList[currentPage.value - 1].words, state.practoceList[
				currentPage.value - 1].wId);
			recordingStatus.value = 'evaluating'
			const tapeModule = await import('@/assets/phoneticPractice/录音@3x.png')
			tapeImgSrc.value = tapeModule.default
		} else if (isiOS.value) {
			window.webkit.messageHandlers.stopRecord.postMessage("")
			recordingStatus.value = 'evaluating'
			const tapeModule = await import('@/assets/phoneticPractice/录音@3x.png')
			tapeImgSrc.value = tapeModule.default
		}
	}

	// 重读
	const againRead = () => {
		state.practoceList[currentPage.value - 1].sourceObj = null
		recordingStatus.value = 'notStarted'
		playAudio()
	}

	//仅停止录音不回调
	const isUserCallBack = ref(true) //是否使用回调信息
	const stopRecording = () => {
		isUserCallBack.value = false
		if (isAndroid.value) {
			window.android.stopRecord(state.practoceList[currentPage.value - 1].words, state.practoceList[
				currentPage.value - 1].wId);
		} else if (isiOS.value) {
			window.webkit.messageHandlers.stopRecord.postMessage("")
		}
	};


	const isPlayMyVideo = ref(false) //是否播放自己的音频
	const playRecording = async () => {
		audioSrc.value = state.practoceList[currentPage.value - 1].fullVideo
		isPlayMyVideo.value = true
		setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}

	const isPlay = ref('stop') //自动播放状态
	const automaticPlay = async () => {
		if (isPlay.value == 'stop') {
			const bottomModule = await import('@/assets/phoneticPractice/暂停@3x.png')
			bottomImgSrc.value = bottomModule.default
			isPlay.value = 'play'
			if (state.practoceList[currentPage.value - 1] && !state.practoceList[currentPage.value - 1].video) {
				playAudio()
			}
			if (state.practoceList[currentPage.value - 1] && state.practoceList[currentPage.value - 1].video) {
				nextWords()
			}
		} else {
			const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
			bottomImgSrc.value = bottomModule.default
			clearTimeout(setTimeoutVal.value)
			if (recordingStatus.value == 'recording') {
				stopRecording() //结束录音
			}
			isPlay.value = 'stop'
			recordingStatus.value = 'notStarted'
		}
	}
	const sourceTimeoutVal = ref()
	const recordFinishCallback = (data) => {
		clearTimeout(sourceTimeoutVal.value)
		if (isUserCallBack.value) {
			recordingStatus.value = 'ended'
			state.practoceList[currentPage.value - 1].sourceObj = {
				accuracy_score: data.accuracy_score, //准确度分
				fluency_score: data.fluency_score, //流畅度分
				integrity_score: data.integrity_score, //完整度分
				total_score: data.total_score //总分
			}
			if (state.practoceList[currentPage.value - 1].sourceObj.total_score == 0) {
				sourceTimeoutVal.value = setTimeout(() => {
					againRead()
				}, 1000)
				return showToast('请提高朗读音量,以免影响评分')
			}
			state.practoceList[currentPage.value - 1].video = data.url
			state.practoceList[currentPage.value - 1].fullVideo = data.fullurl
			sourceTimeoutVal.value = setTimeout(async () => {
				saveFollow()
			}, 1000);
		}

	}
	const isAndroid = ref(false)
	const isiOS = ref(false)
	onMounted(() => {
		var u = navigator.userAgent;
		isAndroid.value = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		isiOS.value = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		window.recordFinishCallback = recordFinishCallback

		totalTime = Date.now();
		initImg()
		getMissionAnswerDetail()
		getUserSetting()
	})

	onUnmounted(() => {
		clearTimeout(setTimeoutVal.value)
		clearTimeout(sourceTimeoutVal.value)
		clearTimeout(audioElementTimeoutVal.value)
	})

	const {
		practoceList,
		sourceObj
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		height: 100%;
		font-size: 18px;

		.text {
			margin-left: 10px;
		}
	}

	.circle-container {
		width: 70px;
		/* 容器大小，根据需要调整 */
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-container1 {
		width: 40px;
		/* 容器大小，根据需要调整 */
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-progress {
		width: 100%;
		height: 100%;
	}

	.circle-bg {
		stroke: #FFFFFF;
		/* 背景圆线条颜色 */
	}

	.circle {
		/* 动画定义 */
		animation: progress 5s ease-out forwards;
	}

	.circle1 {
		/* 动画定义 */
		animation: progress 2s ease-out forwards;
	}

	.circle2 {
		/* 动画定义 */
		animation: progress 1s ease-out forwards;
	}


	@keyframes progress {
		0% {
			stroke-dashoffset: 100.48;
			/* 初始时，线条完全不可见 */
		}

		100% {
			stroke-dashoffset: 0;
			/* 结束时，线条完全可见 */
		}
	}

	.fillBox {
		height: 120px;
	}

	.container-practice {
		// display: flex;
		// flex-direction: column;
		//    align-items: center;
		height: 100%;
		text-align: center;

		.container-height {
			height: 46px;
		}

		.practice-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;

			.practice-top-currentPage {
				font-size: 16px;
				color: #0CB76C;

				span {
					color: #8E8E8E;
				}
			}

			.practice-top-slider {
				flex: 1;
				margin: 0 10px;

			}

			.practice-top-switch {
				border-radius: 12px;
				font-size: 12px;
				background: #0CB76C;
				display: flex;

				div {
					width: 36px;
					height: 100%;
					color: #FFFFFF;
					text-align: center;
					line-height: 22px;
				}

				.active {
					color: #0CB76C;
					border: 1px solid #0CB76C;
					background: #FFFFFF;
					border-radius: 12px;
				}
			}
		}

		.practice-img {
			height: 185px;

			img {
				width: 320px;
				height: 180px;
			}

			margin: 10px 0 10px 0;
		}

		.practice-context {
			font-size: 14px;
			color: #8E8E8E;
			display: flex;
			flex-direction: column;
			align-items: center;

			.practice-context-title {
				color: #333333;
				font-size: 32px;
				line-height: 45px;

			}

			.practice-context-context {
				margin-top: 10px;
			}

			.practice-context-bottom {
				margin-top: 20px;
				padding: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;

				div {
					white-space: pre-line;
				}
			}

		}

		.practiceFractionBox {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 20px;
			margin-top: 10px;

			.practiceFraction {
				display: inline-block;
				font-size: 28px;

				img {
					width: 55px;
					height: 12px;
					margin-bottom: 6px;
				}

				.context {
					margin-top: 5px;
					display: flex;
					align-items: center;
					color: #8E8E8E;
					font-size: 12px;

					.lebel {
						margin-right: 6px;
					}
				}
			}
		}


		.practice-button {
			height: 52px;
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20px 20px;
			position: fixed;
			width: 100%;
			bottom: 28px;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.wordsVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 20px;
				}
			}

			.wordsPlay {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 52px;
					height: 52px;
				}
			}

			.myVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 26px;
				}
			}

			.practice-button-complete {
				// margin-right: 68px;
				font-size: 16px;
				color: #0CB76C;

			}

		}

		.practice-bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 28px;
			background: #E7F8F0;
			color: #0CB76C;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 28px;

			div:nth-child(1) {
				margin-left: 20px;
			}

			div:nth-child(2) {
				margin-right: 20px;
			}

			.practice-bottom-img {
				width: 18px;
				height: 18px;
				margin-left: 20px;
			}
		}




	}

	.van-overlay {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 200;

		.initialImg {
			width: 375px;
			height: 260px;
		}

		.initialDiv {
			width: 102px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 12px;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			border-radius: 18px;
			position: relative;
			top: 30px;
		}
	}

	.automaticOverlay {
		width: 345px;
		height: 184px;
		background: #FFFFFF;
		border-radius: 15px;
		color: #333333;
		font-size: 16px;
		line-height: 32px;

		.automaticOverlay-context {
			margin: 30px 20px;
		}

		.automaticOverlay-button {
			margin: 0 20px 30px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}

			div:nth-child(1) {
				border: 1px solid #8E8E8E;
				border-radius: 22.5px;
				font-size: #333333;
			}

			div:nth-child(2) {
				border-radius: 22.5px;
				color: #FFFFFF;
				background: linear-gradient(to left, #29F19C, #02A1F9);
			}
		}

	}

	::v-deep .van-slider__button {
		display: none !important;
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>